<template>
  <view class="content">
    <top-banner></top-banner>
    <view class="pick-header">
        <view @click="changeType(0)" :class="['pick-item', current==0?'pick-active':'']">八字命理测算</view>
        <view @click="changeType(1)" :class="['pick-item', current==1?'pick-active':'']">手机号测算</view>
        <view @click="changeType(2)" :class="['pick-item', current==2?'pick-active':'']">紫微斗数报告</view>
    </view>
    <view class="container">
      <baziResult ref="baziResult" v-if="current==0" :userInfo='userInfo' :result='bazi'></baziResult>
      <phoneResult ref="phoneResult"  v-if="current==1" :userInfo='userInfo' :result='phoneData'></phoneResult>
      <zwdsResult ref="zwdsResult" v-if="current==2" :userInfo='userInfo' :result='zwds'></zwdsResult>
    </view>
    <drag-button ref="dragButton" :isDock="true" :existTabBar="true"/>
    <teacher-button ref="teacherButton" :isDock="true" :existTabBar="true"/>
    <bottom-recommend></bottom-recommend>
    <phone-save-modal :isSave="isSave" v-on:update:isSave="isSave = $event" :oid="oid" ref="phoneSave" />
    <bottom-banner :name="name" v-if="isSave==true"/>
  </view>
</template>

<script>
  import { getOrderResultApi } from '@/http/api'
  import baziResult from "./result.vue"
  import phoneResult from "./phoneResult.vue"
  import zwdsResult from "./zwdsResult.vue"
	export default {
    name: 'result-index',
		components: {
      baziResult,
      phoneResult,
      zwdsResult
		},
		data() {
			return {
        isSave: false,
        name: '',
				oid: '',
        current: null,
        userInfo: {},
        bazi: {},
        phoneData: {},
        zwds: {},
			}
		},
    mounted() {
      getOrderResultApi({oid: this.$route.query.oid}).then(res => {
        if (res.code == 200) {
          this.userInfo = res.ypOrder;
          this.name = res.ypOrder.username;
          this.oid = res.ypOrder.oid;
          this.bazi = res.bz;
          this.phoneData = res.ph;
          this.zwds = res.zw;
          this.changeType(0)
          this.$nextTick(() => {
            if (res.ypOrder.phonenumber == '' || res.ypOrder.phonenumber == null) {
              console.log(this)
              this.$refs.phoneSave.phoneStart();
              this.isSave = false;
            }else{
              this.isSave = true;
            }
          })
        }else{
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      })
    },
		methods: {
      changeType(type) {
        if (this.current != type) {
          this.current = type;
          // this.$nextTick(() => {
          //   if (type == 0)this.$refs.baziResult.load();
          //   if (type == 1)this.$refs.phoneResult.load();
          //   if (type == 2)this.$refs.zwdsResult.load();            
          // })
        }
      }
		}
	}
</script>

<style lang="scss" scoped>
uni-page-body {
  height: 100%;
}
.content {
  height: 100%;
}
.pick-header {
  width: 100%;
  max-width: 750px;
  height: 80rpx;
  background-color: #fff;
  position: fixed;
	display: flex;
	flex-direction: row;
	justify-content: center;
  z-index: 99;
}
.pick-item {
  color: #595757;
	width: 33%;
	font-size: 32rpx;
	line-height: 80rpx;
  text-align: center;
  font-weight: bold;
}
.pick-active {
  border-bottom: 6rpx solid #c45e04;
}
.container {
  height: fit-content;
  min-height: calc(100% - 160rpx);
  margin-top: 72rpx;
}
</style>
